<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 100vh;
        width: 100%;
      }
      .box1 {
        background-color: skyblue;
      }
      .box2 {
        background-color: pink;
        position: relative;
      }
      .box3 {
        background-color: skyblue;
      }
      .item {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      img {
        position: absolute;
        width: 20vw;
        height: 20vw;
        top: 40vh;
        left: 40vw;
      }
    </style>
  </head>
  <body>
    <div class="box1 box"></div>
    <div class="box2 box">
      <div class="item">
        <img class="p1" src="./aquarius.png" alt="" />
        <img class="p2" src="./aquarius.png" alt="" />
        <img class="p3" src="./aquarius.png" alt="" />
        <img class="p4" src="./aquarius.png" alt="" />
        <img class="p5" src="./aquarius.png" alt="" />
        <img class="p6" src="./aquarius.png" alt="" />
        <img class="p7" src="./aquarius.png" alt="" />
      </div>
    </div>
    <div class="box3 box"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
    <script>
      ScrollTrigger.create({
        trigger: '.box2',
        start: 'top top', // 动画开始位置，滚动到距视口顶部30%
        end: '+=800', // 动画结束位置，滚动到距视口顶部20%
        scrub: true,
        // markers: true,
        pin: true,
        animation: gsap
          .timeline()
          .fromTo(
            '.p7',
            { left: '40vw' },
            { left: '10vw', width: '7vw', height: '7vw' }
          )
          .fromTo(
            '.p1',
            { left: '40vw' },
            { left: '20vw', width: '8vw', height: '8vw' }
          )
          .fromTo(
            '.p2',
            { left: '40vw' },
            { left: '30vw', width: '9vw', height: '9vw' }
          )
          .fromTo(
            '.p6',
            { left: '40vw' },
            { left: '70vw', width: '7vw', height: '7vw' }
          )
          .fromTo(
            '.p3',
            { left: '40vw' },
            { left: '60vw', width: '8vw', height: '8vw' }
          )
          .fromTo(
            '.p5',
            { left: '40vw' },
            { left: '50vw', width: '9vw', height: '9vw' }
          )
          .fromTo(
            '.p4',
            { left: '40vw' },
            { left: '40vw', width: '12vw', height: '12vw' }
          )
      })
    </script>
  </body>
</html>
